<section class="content-header">
  <h1>Jobs History ({{$ctrl.pagination.total}})</h1>
</section>

<section class="jobs-page content">
  <div class="box box-primary paginable-page">
    <div class="box-header">
      <form class="form-inline table-toolbar" ng-submit="$ctrl.applyFilters()">
        <div class="form-group">
          <div>
            <Label>Data Types ({{$ctrl.datatypes.length}})</Label>
          </div>
          <multiselect class="pull-left mr-xs" ng-model="$ctrl.filters.dataType" options="$ctrl.datatypes" placeholder="Select" show-select-all="true"
 show-unselect-all="true" show-search="true" classes-btn="($ctrl.filters.dataType.length > 0) ? 'btn-block btn-primary' :
'btn-default btn-block'">
          </multiselect>
        </div>
        <div class="form-group">
          <div>
            <Label>Job Type ({{$ctrl.jobtypes.length}})</Label>
          </div>
          <multiselect class="pull-left mr-xs" ng-model="$ctrl.filters.jobType" options="$ctrl.jobtypes" placeholder="Select" show-select-all="true"
 show-unselect-all="true" show-search="true" classes-btn="($ctrl.filters.jobType.length > 0) ? 'btn-block btn-primary' :
'btn-default btn-block'">
          </multiselect>
        </div>
        <div class="form-group">
          <div>
            <Label>Analyzers ({{$ctrl.analyzers.length}})</Label>
          </div>
          <multiselect class="pull-left mr-xs" ng-model="$ctrl.filters.analyzer" 
            options="$ctrl.analyzers" 
            show-search="true"
            id-prop="id" 
            display-prop="name"
            placeholder="Select" 
            show-select-all="true" 
            show-unselect-all="true" 
            search-limit="100"
            classes-btn="($ctrl.filters.analyzer.length > 0) ? 'btn-block btn-primary' : 'btn-default btn-block'">
          </multiselect>
        </div>
        <div class="form-group">
          <div>
            <label>Observable</label>
          </div>
          <div>
            <input type="text" class="form-control mr-xs" placeholder="Search for observable data" ng-model="$ctrl.filters.search">
            <button class="btn btn-primary" type="submit">Search</button>
            <button class="btn btn-clear text-danger ml-xxxs" type="button" ng-click="$ctrl.clearFilters()">
              <i class="fa fa-times-circle"></i> Clear</button>
          </div>          
        </div>
        <div class="form-group pull-right">
          <div><label>Pagination</label></div>
          <div>
            <ul class="pull-left mr-xs" ng-show="$ctrl.pagination.total > $ctrl.pagination.pageSize" uib-pagination total-items="$ctrl.pagination.total"
              ng-change="$ctrl.load()" ng-model="$ctrl.pagination.current" boundary-links="true" items-per-page="$ctrl.pagination.pageSize"
              previous-text="&lsaquo;" next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;" max-size="3" rotate="false"></ul>
            <select class="form-control" ng-model="$ctrl.pagination.pageSize" ng-change="$ctrl.load()" ng-options="v as (v + ' / page') for v in [10, 50, 100, 1000]"></select>            
          </div>
        </div>
      </form>

    </div>
    <div class="box-body">
      <jobs-list jobs="$ctrl.jobs" on-delete="$ctrl.load(1)"></jobs-list>
    </div>
    <div class="box-footer clearfix">
      <div class="box-tools btn-toolbar pull-right">
        <ul ng-show="$ctrl.pagination.total > $ctrl.pagination.pageSize" uib-pagination total-items="$ctrl.pagination.total"
          ng-change="$ctrl.load()" ng-model="$ctrl.pagination.current" boundary-links="true" items-per-page="$ctrl.pagination.pageSize"
          previous-text="&lsaquo;" next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;" max-size="3" rotate="false"></ul>
        <select class="ml-xs form-control pull-right " ng-model="$ctrl.pagination.pageSize" ng-change="$ctrl.load()" ng-options="v as (v + ' / page') for v in [10, 50, 100, 1000]"></select>
      </div>
    </div>
  </div>
</section>
<!-- /.content -->